<template>
   <el-container style="height:100%;border:2px solid #eee">
    <el-aside
        :width="asideWith"
      style="height:100vh;background-color:blueviolet; color:#333 ;">
      <Aside :isCollaspe="isCollapse"></Aside>
    </el-aside>
    <el-container style="min-height:100vh">
      <el-header
        style="text-align:right; font-size:12px; width:100%;border-bottom:#abc;line-height: 60px;background-color: deepskyblue;color:bisque">
        <Header @doCollapse="doCollapse" :icon="icon"></Header>
      </el-header>
      <el-main style="height:100%;padding:5px">
        <router-view></router-view></el-main>
      <el-footer style="text-align:center;font-size:12px;">@TCW</el-footer>
    </el-container>
  </el-container>
</template>

<script>
import Aside from "./Aside.vue"
import Header from "./Header.vue"
export default {
  name: 'IndexForm',
  components:{Aside,Header},
  data(){
    return{
      isCollapse:false,
      asideWith:"220px",
      icon:'el-icon-s-fold'
    }
  },methods:{
    doCollapse(){
      this.isCollapse=!this.isCollapse;
      if(!this.isCollapse){
        this.asideWith='220px',
        this.icon='el-icon-s-fold'
      }else {
        this.asideWith='64px',
        this.icon='el-icon-s-unfold'
      }
    }
  }

}
</script>

<style>
</style>
